<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>满减活动，最优组合</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <h1 class="title">参加满级活动时，选出最划算的组合</h1>
    <div class="setting">
        <div class="init">
            <p class="fz_20">输入所有想要的产品信息</p>
            <label>
                <span class="label">产品名称 : </span>
                <input type="text" id="name" placeholder="输入名称">
            </label>
            <label>
                <span class="label">单价 : </span>
                <input type="number" id="price" placeholder="输入价格">
            </label>
            <input id="join" class="join-arr" type="button" value="录入信息">
        </div>
        <hr>
        <div class="show-list">
            <p class="fz_20">已录入的产品信息</p>
            <table border="1">
                <thead>
                    <tr>
                        <th>产品名</th>
                        <th>单价</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="product_content">
                    <tr>
                        <td>空</td>
                        <td>空</td>
                        <td> </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <hr>
        <div class="config">
            <p class="fz_20">获得组合的配置</p>
            <label>
                <span class="label">满减价格 : </span>
                <input type="number" id="total" placeholder="满足多少钱才会优惠">
            </label>
            <label>
                <span class="label">展示组合数 : </span>
                <input type="number" id="itemNum" value="5" placeholder="默认展示5个组合">
            </label>
        </div>
        <input id="result" type="button" value="获取组合结果">
    </div>
    <div class="show">
        <p class="fz_20">获得最优惠组合</p>
        <table border="1">
            <thead>
                <tr>
                    <th>产品名组合</th>
                    <th>组合总价</th>
                </tr>
            </thead>
            <tbody id="showList">
                <tr>
                    <td>空</td>
                    <td>空</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script src="index.js"></script>

</html>